<!-- 基础弹窗组件 -->

<!-- 属性 -->
<!-- 配置名称 | 类型 | 用途 | 返回值 | 默认值 | 必填 | 说明 -->
<!-- v-model    | Boolean | 控制弹窗显示隐藏 | - | false | - | 无 -->
<!-- attributes | Object  | 弹窗自带属性透传 | - | {
  'show-close': false,
  'close-on-click-modal': false,
  'close-on-press-escape': false,
  'align-center': true,
  'append-to-body': true,
  'destroy-on-close': true
} | - | 无 -->

<!-- 事件 -->
<!-- 无 -->

<!-- 插槽 -->
<!--
  #title: 弹窗标题
  #buttons: 底部按钮们
  #default: 弹窗内容
-->
<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: boolean
  attributes?: any
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  attributes: () => {
    return {}
  },
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
}>()

const defaultAttributes = {
  'show-close': false,
  'close-on-click-modal': false,
  'close-on-press-escape': false,
  'align-center': true,
  'append-to-body': true,
  'destroy-on-close': true,
}
const bindAttributes = {}
Object.assign(bindAttributes, defaultAttributes, props.attributes, { title: '' })

const visiable = ref(false)

watch(
  () => props.modelValue,
  (newVal) => {
    visiable.value = newVal
  },
  {
    immediate: true,
  },
)

watch(visiable, (newVal) => {
  if (!newVal) {
    emit('update:modelValue', false)
  }
})

const handleClose = () => {
  visiable.value = false
}
</script>

<template>
  <el-dialog v-model="visiable" class="base-dialog-wrapper" v-bind="bindAttributes">
    <div class="header-container">
      <div class="header-title">
        <slot name="title">弹窗</slot>
      </div>
      <div class="header-colse" @click="handleClose">
        <SvgIcon icon="dialog-close"></SvgIcon>
      </div>
    </div>
    <div class="body-container">
      <slot></slot>
    </div>
    <div class="footer-container">
      <slot name="buttons"></slot>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.base-dialog-wrapper {
  --el-dialog-bg-color: rgba(255, 255, 255, 0) !important;
  --el-dialog-width: auto;
  --el-dialog-padding-primary: 0;
  .el-dialog__header {
    height: 53px;
    width: calc(100% - 50px);
    position: absolute;
    top: 0;
    z-index: 9;
    margin-right: 0;
    opacity: 0;
  }
  .el-dialog__body {
    padding: 0;
  }
  .header-container {
    width: 100%;
    height: 53px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    background-color: rgba(242, 243, 247, 1);
    border-bottom: 1px solid rgba(220, 223, 230, 1);
    .header-title {
      font-family: 'PingFangSC-Bold';
      font-size: 14px;
      font-weight: bold;
      color: var(--black-color);
      line-height: 16px;
    }
    .header-colse {
      width: 10px;
      height: 10px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      cursor: pointer;
      .svg-icon {
        width: 10px;
        height: 10px;
        color: rgba(193, 197, 206, 1);
      }
    }
  }
  .body-container {
    width: auto;
    height: auto;
    min-width: 300px;
    padding: 32px;
    background-color: var(--white-color);
  }
  .footer-container {
    width: 100%;
    height: 72px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    background-color: var(--white-color);
    border-top: 1px solid rgba(220, 223, 230, 1);
  }
}
</style>
